import * as React from 'react';
import {UploaderStatus} from "./uploader-status";


export interface UploaderInlineProps {
    canClose?: boolean;
    message?: string;
}

export interface UploaderInlineState {
}

export class UploaderInline extends React.Component<UploaderInlineProps, UploaderInlineState> {
    render() {
        return (
            <div className="uploader-inline">
                {this.renderClose()}
                <div className={"uploader-inline-content " + (this.props.message ? "has-upload-message" : "no-upload-message")}>
                    {this.renderMessage()}
                    <div className="upload-ui">
                        <h2 className="upload-instructions drop-instructions">拖文件到任何地方来上传</h2>
                        <p className="upload-instructions drop-instructions">或</p>
                        <button type="button" className="browser button button-hero">选择文件</button>
                    </div>
                    <UploaderStatus queue={[]} errors={[]} />
                </div>
            </div>
        );
    }

    renderClose() {
        if (this.props.canClose) {
            return (
                <button className=" dashicons dashicons-no">
                    <span className="screen-reader-text">关闭上传</span>
                </button>
            )
        } else {
            return null;
        }
    }

    renderMessage() {
        if (this.props.message) {
            return <h2 className="upload-message">{this.props.message}</h2>
        } else {
            return null;
        }
    }
}
